/**
 * 基础菜单 电费管理
 */
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>电费管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索：">
                <el-input
                    size="small"
                    v-model="formInline.nickName"
                    placeholder="输入用户名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input
                    size="small"
                    v-model="formInline.phone"
                    placeholder="输入手机号"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    >搜索</el-button
                >
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table
            size="small"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            border
            element-loading-text="拼命加载中"
            style="width: 100%"
        >
            <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
            >
            </el-table-column>
            <!-- <el-table-column prop="userId" label="用户id" width="100">
            </el-table-column> -->
            <el-table-column prop="nickName" sortable label="用户名" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="160">
            </el-table-column>
            <el-table-column prop="month" label="月份" width="80">
            </el-table-column>
            <el-table-column prop="mTotal" label="月总用电量(w)" width="150">
            </el-table-column>
            <el-table-column prop="pay" label="缴费情况(元)" width="200">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="200">
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" min-width="200">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteUser(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页组件 -->
        <Pagination
            v-bind:child-msg="pageparm"
            @callFather="callFather"
        ></Pagination>
        <!-- 编辑界面 -->
        <el-dialog
            :title="title"
            :visible.sync="editFormVisible"
            width="50%"
            @click="closeDialog"
        >
            <el-form
                label-width="100px"
                :model="editForm"
                :rules="rules"
                ref="editForm"
            >
                <el-form-item label="用户名称" prop="deptName">
                    <el-input
                        size="small"
                        v-model="editForm.nickName"
                        placeholder="请输入用户名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户电话" prop="deptNo">
                    <el-input
                        size="small"
                        v-model="editForm.phone"
                        placeholder="请输入电话"
                    ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="deptNo">
                    <el-input
                        size="small"
                        v-model="editForm.remark"
                        auto-complete="off"
                        type="textarea"
                        placeholder="备注"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    :loading="loading"
                    class="title"
                    @click="submitForm('editForm')"
                    >保存</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '../../components/Pagination';
import { httpAjax } from '../../api/axiosFun';

export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '添加',
            editForm: {
                nickName: '',
                phone: '',
                remark: '',
            },
            // rules表单验证
            rules: {
                deptName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' }
                ],
                deptNo: [{ required: true, message: '请输入用户代码', trigger: 'blur' }]
            },
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken'),
                phone:'',
                nickName:''
            },
            // 删除用户
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            listDataFiter: [], //用户数据 用于过滤不改变
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 1,
                total: 10
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getdata(this.formInline)
    },
    methods: {
        // 获取列表
        getdata(parameter) {
            this.loading = true;
            console.log('1111')
            // 模拟数据
            // let res = {
            //     code: 0,
            //     msg: null,
            //     count: 1,
            //     data: [
            //         {
            //             userId: 1,
            //             nickName: 'babala',
            //             phone: 15602232489,
            //             month: 1,
            //             pay: 99, //缴费情况
            //             mTotal: 10,//月总量（单位：）
            //             remark: '备注。。。',
            //         },
            //     ]
            // }
            // this.listData = res.data
            let self= this;
            httpAjax({
                method: 'POST',
                url: '/api/getMonthList',
                data: {
 
                }
            }).then(res => {
                console.log(res)
                self.listData = res.data.data;
                self.listDataFiter = res.data.data;
            })

            this.loading = false
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = self.listData.length;
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            // this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
            // let          
            let tempArr = [];
            let self = this;
            if(!self.formInline.phone && !self.formInline.nickName){
                self.getdata();
                return;
            }
           
            this.listDataFiter.map(item=>{
                let phoneRet = !self.formInline.phone ? false: item.phone.indexOf(self.formInline.phone)>=0;
                let nickNameRet = !self.formInline.nickName ? false : item.nickName.indexOf(self.formInline.nickName)>=0;
                if(phoneRet || nickNameRet){
                    tempArr.push(item);
                }
            }) 

            // console.log(tempArr);
            self.listData = tempArr;
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row != undefined && row != 'undefined') {
                this.title = '编辑信息'
                this.editForm.nickName = row.nickName
                this.editForm.phone = row.phone
                this.editForm.remark = row.remark
            }
        },
        // 编辑、增加页面保存方法
        submitForm(editData) {

        },
        deleteUser(index, row) {
            this.$confirm('确定要删除吗?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(rs => {
                console.log('确定', rs)
            }).catch(err => {
                console.log('取消', err)
            })
        },
        closeDialog() {
            this.editFormVisible = false
        }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
.userRole {
    width: 100%;
}
</style>

 
 